import { useContext } from 'react';
import Editor from './Editor';
import { PlaygroundContext } from '../../PlaygroundContext';
import { debounce } from "lodash-es";

export default function CodeEditor() {
	const {
		files,
		setFiles,
		selectedFileName,
		setSelectedFileName
	} = useContext(PlaygroundContext)

	const file = files[selectedFileName];

	function onEditorChange(value?: string) {
		// TODO 切换文件时候把预先设置的文件引入的包 ata下载一下类型
		files[file.name].value = value!
		setFiles({ ...files })
	}

	return <div style={{ height: '100%' }}>
		<Editor file={file} onChange={debounce(onEditorChange, 500)} />
	</div>
}